<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>龙小湖向你发起游戏挑战</title>
  <meta name="keywords" content="龙湖,龙小湖,脑力大作战,h5游戏," />
  <meta name="description" content="挑战龙小湖-快来比拼脑力颜色吧" />
  <link rel="shortcut icon" href="./imgs/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/weixin-js-sdk.js"></script>
  <script src="./js/wxconfig.js"></script>
</head>

<body>
  <audio preload="auto" id="audio-1" loop="loop" volume="0.5">
    <source src="./audio/3.mp3" type="audio/mpeg" />
  </audio>
  <audio preload="auto" id="audio-2" loop="loop">
    <source src="./audio/click.mp3" type="audio/mpeg" />
  </audio>
  <audio preload="auto" id="audio-3" loop="loop">
    <source src="./audio/slide.mp3" type="audio/mpeg" />
  </audio>
  <img class="bg-music" id="png-10" src="./imgs/10.png" alt="音乐">
  <img class="bg-music" id="png-17" src="./imgs/17.png" alt="音乐">
  <div class="page row" id="load-page">
    <div class="col contain">
      <img class="loading-gif" src="./imgs/loading.gif" alt="loading gif">
      <div id="progress">100%</div>
      <div class="are-u-ready animated flash infinite">ARE U READY ?</div>
    </div>
  </div>
  <div class="page" id="home-page">
    <div class="contain col">
      <img class="animated zoomIn" id="png-15" src="./imgs/15.png" alt="卧湖藏龙" />
      <img class="animated fadeInRight delay-1s" id="png-9" src="./imgs/9.png" alt="龙小湖向你发起挑战" />
      <img class="animated bounceIn delay-2s" id="png-11" src="./imgs/11.png" alt="初次见面" />
      <div class="btn-div">
        <img class="animated fadeInUp delay-2s" id="png-18" src="./imgs/18.png" alt="龙小湖" />
        <img id="png-12" class="animated rotateIn delay-3s" src="./imgs/12.png" alt="点击挑战" />
      </div>
    </div>
  </div>
  <div class="page game-1" id="game-rule-1">
    <div class="contain col">
      <div class="top col">
        <img class="animated zoomIn" id="png-4" src="./imgs/4.png" alt="湖上湖下">
        <div class="rule col">
          <div class="rule-title"><span class="text">游戏规则</span></div>
          <p>蓝色：沿箭头方向滑动</p>
          <p>红色：沿箭头<span class="red">相反</span>方向滑动</p>
        </div>
        <div class="jt-div animated fadeInUp">
          <img class="jt png-7" src="./imgs/7.png" alt="向上箭头">
          <img class="png-6" src="./imgs/6.png" alt="龙小湖">
          <button class="animated infinite flash delay-3s start-btn" id="start-btn-1">START</button>
        </div>
      </div>
      <div class="bottom col">
        <!-- <img class="jt png-7-1" src="./imgs/8.png" alt="向下箭头"> -->
      </div>
    </div>
  </div>
  <div class="page game-1" id="game-page-1">
    <div class="contain col">
      <div class="top col">
        <div class="rule col" id="rule-1">
          <div class="rule-title row">
            <div class="line"></div>
            <div class="text">游戏规则</div>
            <div class="line"></div>
          </div>
          <p>蓝色：沿箭头方向滑动</p>
          <p>红色：沿箭头<span class="red">相反</span>方向滑动</p>
        </div>
        <div class="time" id="olock-1">
          00:<span id="time-1">15</span>
        </div>
        <div id='game-1-current'>
        </div>
      </div>
      <div class="bottom col">
        <div id="game-1-wait">
        </div>
      </div>
    </div>
  </div>
  <div class="page" id="time-up-page">
    <div class="contain col animated slideInDown">
      <img id="png-2" src="./imgs/2.png" alt="时钟">
      <img id="png-1" src="./imgs/1.png" alt="time's up">
    </div>
  </div>
  <div class="page game-2" id="game-rule-2">
    <div class="contain-bg row">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="contain col">
      <img class="animated zoomIn" id="png-3" src="./imgs/3.png" alt="好色之湖">
      <div class="rule col">
        <div class="rule-title row">
          <div class="line"></div>
          <div class="text">游戏规则</div>
          <div class="line"></div>
        </div>
        <p>观察龙小湖身上的颜色提示</p>
        <p>点击与提示信息<span class="red">相同</span>底色的方格</p>
      </div>
      <div class="row longfor">
        <div class="longfor-color">
          <img class="png-5" src="./imgs/5.png" alt="龙小湖">
          <span class="color">蓝</span>
        </div>
        <div class="longfor-color">
          <img class="png-5" src="./imgs/5.png" alt="龙小湖">
          <span class="color">绿</span>
        </div>
      </div>
      <button class="animated infinite flash delay-3s start-btn" id="start-btn-2">START</button>
    </div>
  </div>
  <div class="page game-2" id="game-page-2">
    <div class="contain col">
      <div class="rule col" id="rule-2">
        <div class="rule-title row">
          <div class="line"></div>
          <div class="text">游戏规则</div>
          <div class="line"></div>
        </div>
        <p>观察龙小湖身上的颜色提示</p>
        <p>点击与底色<span class="red">相同</span>的方格</p>
      </div>
      <div class="time" id="olock-2">
        00:<span id="time-2">15</span>
      </div>
      <div class="row longfor" id="longfor-current">

      </div>
    </div>
  </div>

  <div class="row last-page">
    <div class="relative row">
        <div class="canvas" id="canvas">
          </div>
          <div class="result-page" id="share-page">
            <div class="contain col">
              <div class="col res-text">
                <p id="res-name"></p>
                <p>挑战成绩
                  <span id="res-score">100</span>分！</p>
                <img id="res-title" data-id='1' src="./imgs/result-1.png" alt="">
              </div>
              <div class="picture">
                <img id="res-img" src="./imgs/poster-1.png" alt="结果明信片">
                <img class="yinzh" src="./imgs/yinzh.png" alt="印章">
              </div>
              <div class="code col">
                <img class="code-img" src="./imgs/16.png" alt="二维码">
                <p>想要挑战龙小湖？更多称号，赶紧扫码</p>
              </div>
            </div>
          </div>
    </div>
    <div id="again-div" class="btn-row">
      <button class="btn row animated flash" id="again-btn">不服气！再次挑战</button>
      <p class='save-text animated flash'>或长按页面，保存图片分享</p>
    </div>
  </div>
</body>
<script>
  (function (d) {
    console.log(document.body.clientWidth, document.body.clientHeight);
    var html = d.getElementsByTagName('html')[0], // html节点
      width = html.clientWidth, // 设备宽度
      dpr = window.devicePixelRatio, // 像素比
      scale = Number(width / 750).toFixed(4), //  320：0.427   768：1.024
      lastScale = scale > 1.024 ? 1.024 : (scale < 0.427 ? 0.427 : scale),
      resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var changePage = function (e) {
      html.setAttribute('style', 'font-size:' + (lastScale * 100).toFixed(3) + 'px');
    }
    changePage();
    if (!document.addEventListener) return;
    window.addEventListener(resizeEvent, changePage, false); //监听设备屏幕旋转/页面resize
    document.addEventListener('DOMContentLoaded', changePage, false); // 监听刷新页面
  })(document);
</script>
<script src="./js/html2canvas.js"></script>
<script src="./js/resLoader.js"></script>
<script src="./js/index.js"></script>

</html>
